/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Arial, sans-serif;
}

body {
    background-color: #f5f5f5;
    padding-top: 2.5em;/* 顶部内边距 */
    min-height: 100vh;/* 最小高度为视口高度 */
    display: flex;
    flex-direction: column;/* 弹性布局，垂直方向 */
}

/* 顶部导航条 */
.navigate {
    position: fixed;/* 固定定位 */
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: #2c3e50; */
    background-color: #417dff;
    padding: 1em 2em;
    display: flex;
    justify-content: space-between;/* 两端对齐 */
    align-items: center;
    box-shadow: 0 0.25em 0.375em rgba(0, 0, 0, 0.1);/* 阴影效果 */
    z-index: 1000;
    height: 2.5em;
}

.navigate .logo {
    color: white;
    font-size: 1em;
    font-weight: 600;
}

.navigate .operation .operation_bar tr {
    display: flex;
    gap: 1.5em;/* 子元素间距 */
}

.navigate .operation .operation_bar td a {
    color: white;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
}

.navigate .operation .operation_bar td a:hover {
    color: #1abc9c;
}

/* 用户资料显示区域 */
#user-profile {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

#user-avatar {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    object-fit: cover;/* 图片填充方式 */
}

#username {
    color: white;
    font-size: 0.875em;
	transition: color 0.3s ease;
}
/* 用户名悬停效果 */
#username:hover{
	color: #1abc9c;
}

/* bg盒子,盒子中嵌套网页 */
.bg {
    margin: 0.5em auto;
    height: 38.5em;
    width: 62.5em;
    /* background-color: yellow; */
    display: flex;
    padding: 0.1em;
}

iframe {
    margin: 0 auto;
    height: 38em;
    width: 62em;
    background-color: #1abc9c;
}

/* 评论区样式 */
.message_area {
    width: 62.5em;
    margin: 2em auto;
    background-color: white;
    border-radius: 0.5em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
    padding: 1.5em;
}

.message_area h2 {
    font-size: 1.25em;
    color: #2c3e50;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 0.0625em solid #eee;/* 底部边框 */
}

/* 评论表单样式 */
.comment_form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 2em;
}
/* 评论输入框 */
.comment_form textarea {
    height: 6em;
    padding: 0.75em;
    border: 0.0625em solid #ddd;
    border-radius: 0.25em;
    resize: vertical;/* 允许垂直调整大小 */
    font-size: 1em;
}

.comment-options {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;/* 允许换行 */
}
/* 文件上传和位置权限选项 */
.file-upload, .location-permission {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.875em;
    color: #555;
    cursor: pointer;
}

.file-upload input{
    display: none;/* 隐藏文件输入框 */
}
/* 媒体预览区域 */
#media-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0.5em;
}
/* 媒体项样式 */
.media-item {
    max-width: 6em;
    max-height: 6em;
    border-radius: 0.25em;
    object-fit: cover;
}
/* 评论提交按钮 */
.comment_form button {
    align-self: flex-end;
    padding: 0.5em 1.5em;
    background-color: #1abc9c;
    color: white;
    border: none;
    border-radius: 0.25em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.comment_form button:hover {
    background-color: #16a085;
}

/* 评论列表 */
.comment_list {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.comment_item {
    display: flex;
    gap: 1em;
    padding-bottom: 1em;
    border-bottom: 0.0625em solid #f5f5f5;
}

.comment_avatar {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    overflow: hidden;
}

.comment_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment_content {
    flex: 1;
}

.comment_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
}

.comment_author {
    font-weight: 600;
    color: #2c3e50;
}

.comment_time {
    font-size: 0.75em;
    color: #999;
}

.comment_text {
    color: #555;
    line-height: 1.5;
    margin-bottom: 0.5em;
}

.comment_media {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.comment_media img, .comment_media video, .comment_media audio {
    max-width: 12em;
    max-height: 12em;
    border-radius: 0.25em;
}

.comment_location {
    font-size: 0.75em;
    color: #999;
    margin-bottom: 0.5em;
}

.comment_actions {
    display: flex;
    gap: 1em;
}

.comment_action {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.875em;
    color: #666;
    cursor: pointer;
}

.comment_action:hover {
    color: #1abc9c;
}

.comment_action i {
    font-size: 1em;
}




/* 媒体预览容器样式 */
.media-item-container {
    position: relative;
    display: inline-block;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

/* 删除按钮样式 */
.delete-media {
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 1em;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875em;
    line-height: 1;
    padding-bottom: 0.1em;
    z-index: 10;
}

.delete-media:hover {
    background: rgba(255, 0, 0, 0.8);
}

/* 拖放区域高亮样式 */
.comment_form.highlight {
    border: 0.125em dashed #1abc9c;
    background: rgba(26, 188, 156, 0.1);
}

.media-preview.drag-over {
    background: rgba(255, 0, 0, 0.1);
    border: 0.125em dashed red;
}

/* 可拖拽媒体项样式 */
.media-item-container[draggable="true"] {
    cursor: move;
    opacity: 0.8;
}